<template>
  <div>
    <HeadTag :tagName="tagName" :curTag="curTag"></HeadTag>
    <el-divider></el-divider>
    <Search :searchTable="searchTable" :showSearch="showSearch" :selectOptions="selectOptions"></Search>
    <el-button type="primary" @click="getStudent">重置</el-button>
    <el-button type="primary" @click="showAddStudent">新增学生</el-button>
    <Table :tHead="tHead" :tBody="tBody" :tButton="tButton"></Table>
    <!-- 修改框 -->
    <el-dialog title="修改学生信息" align="center" :visible.sync="changeDialogVisible" width="30%">
      <el-form :model="changeForm" :rules="changeRules" ref="changeRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学号:" prop="s_sno">
          <el-input v-model="changeForm.s_sno" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="s_name">
          <el-input v-model="changeForm.s_name"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="s_account">
          <el-input v-model="changeForm.s_account" disabled></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="s_password">
          <el-input v-model="changeForm.s_password"></el-input>
        </el-form-item>
        <el-form-item label="所属宿舍:" prop="dormitory">
          <el-select v-model="changeForm.d_number" placeholder="宿舍">
            <el-option v-for="(val,index) in dormitoryList" :key="index" :label="val" :value="val"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeStudent">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 增加框 -->
    <el-dialog title="新增学生" align="center" :visible.sync="addDialogVisible" width="30%">
      <el-form :model="addForm" :rules="addRules" ref="addRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学号:" prop="s_sno">
          <el-input v-model="addForm.s_sno"></el-input>
        </el-form-item>
        <el-form-item label="姓名:" prop="s_name">
          <el-input v-model="addForm.s_name"></el-input>
        </el-form-item>
        <el-form-item label="账号:" prop="s_account">
          <el-input v-model="addForm.s_account"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="s_password">
          <el-input v-model="addForm.s_password"></el-input>
        </el-form-item>
        <el-form-item label="所属宿舍:" prop="dormitory">
          <el-select v-model="addForm.d_number" placeholder="所属宿舍">
            <el-option v-for="(val,index) in dormitoryList" :key="index" :label="val" :value="val"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 缴费记录 -->
    <el-dialog title="缴费记录" :visible.sync="monetDialogVisible" align="center">
      <el-table :data="moneyTable">
        <el-table-column property="p_money" label="缴费金额" align="center"></el-table-column>
        <el-table-column property="p_time" label="缴费时间" align="center"></el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" :total="moneyPageInfo.total" :page-size="moneyPageInfo.pageSize" :current-page.sync="moneyPageInfo.currentPage" @current-change="handleCurrentChange" v-if="moneyData.length">
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      //HeadTag属性
      tagName: [],
      curTag: '学生管理',
      //Table属性
      tHead: [
        {
          prop: 's_sno',
          label: '学号'
        },
        {
          prop: 's_name',
          label: '姓名'
        },
        {
          prop: 's_account',
          label: '账号'
        },
        {
          prop: 'd_number',
          label: '学生所属宿舍'
        },
        {
          prop: 'd_money',
          label: '宿舍水电费余额(元)'
        },
        {
          prop: 'd_status',
          label: '宿舍状态'
        }
      ],
      tBody: [],
      tButton: [
        {
          content: '修改',
          type: 'success',
          method: this.changeRow
        },
        {
          content: '删除',
          type: 'danger',
          method: this.deleteRow
        },
        {
          content: '查看缴费记录',
          type: 'primary',
          method: this.lookMoney
        }
      ],
      //修改框
      changeDialogVisible: false,
      changeForm: {},
      changeRules: {
        s_name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        s_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
      },
      //宿舍下拉框数据
      dormitoryList: [],
      changeInfo: {
        s_id: '',
        s_name: '',
        s_password: '',
        d_number: ''
      },
      //搜索
      showSearch: {
        input: true,
        select: true
      },
      selectOptions: [],
      // 新增学生
      addDialogVisible: false,
      addForm: {
        s_sno: '',
        s_name: '',
        s_account: '',
        s_password: '',
        d_number: ''
      },
      addRules: {
        s_name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        s_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
      },
      //缴费记录
      monetDialogVisible: false,
      moneyData: [],
      moneyPageInfo: {
        total: 10,
        pageSize: 5,
        currentPage: 1
      },
      moneyTable: []
    }
  },
  methods: {
    //table操作
    changeRow (row) {
      this.changeForm = JSON.parse(JSON.stringify(row))
      this.changeForm.s_password = ''
      this.changeDialogVisible = true
    },
    deleteRow (row) {
      this.deleteStudent(row.s_id)
    },
    async lookMoney (row) {
      const result = await this.$http.post('/getStudentMoney', { s_id: row.s_id })
      if (result.status === 201) {
        this.monetDialogVisible = true
        this.moneyData = []
        this.moneyTable = []
        return
      }
      if (result.status !== 200) return this.$message.error('获取缴费记录信息失败!')
      this.moneyData = result.data
      this.moneyData.forEach((val) => {
        val.p_time = this.$formatDate(val.p_time)
      })
      this.moneyPageInfo.total = this.moneyData.length
      this.showMoneyTable()
      this.monetDialogVisible = true
    },

    //缴费分页渲染
    handleCurrentChange (val) {
      this.moneyPageInfo.currentPage = val
      this.showMoneyTable()
    },
    showMoneyTable () {
      let start = this.moneyPageInfo.pageSize * (this.moneyPageInfo.currentPage - 1)
      this.moneyTable = this.moneyData.filter((val, index) => {
        if (index >= start && index < this.moneyPageInfo.pageSize + start) {
          return val
        }
      })
    },
    //获取学生数据
    async getStudent () {
      const result = await this.$http.get('/getStudent')
      if (result.status !== 200) return this.$message.error(result.message)
      result.data.forEach((val) => {
        if (val.d_status === 1) {
          val.d_status = '正常'
        } else {
          val.d_status = '催款中'
        }
      })
      this.tBody = result.data
    },

    //获取宿舍列表
    async getDormitoryList () {
      const result = await this.$http.get('/getDormitoryList')
      result.data.forEach((val) => {
        this.dormitoryList.push(val.d_number)
      })
      this.selectOptions = JSON.parse(JSON.stringify(this.dormitoryList))
      this.selectOptions.unshift('')
    },

    //新增学生
    showAddStudent () {
      this.addDialogVisible = true
    },
    addStudent () {
      this.$refs.addRef.validate(async (valid) => {
        if (valid) {
          const result = await this.$http.post('/addStudent', this.addForm)
          if (result.status !== 200) return this.$message.error(result.message)
          this.getStudent()
          this.$message.success('新增成功!')
          this.addDialogVisible = false
          this.addForm = {
            s_sno: '',
            s_name: '',
            s_account: '',
            s_password: '',
            d_number: ''
          }
        }
      });
    },
    //修改学生数据
    changeStudent () {
      this.$refs.changeRef.validate(async (valid) => {
        if (valid) {
          this.changeInfo.s_id = this.changeForm.s_id
          this.changeInfo.s_name = this.changeForm.s_name
          this.changeInfo.s_password = this.changeForm.s_password
          this.changeInfo.d_number = this.changeForm.d_number
          const result = await this.$http.post('/changeStudent', this.changeInfo)
          if (result.status !== 200) return this.$message.error('修改失败!')
          this.getStudent()
          this.$message.success('修改成功!')
          this.changeDialogVisible = false
        }
      });
    },
    //删除学生数据
    deleteStudent (id) {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const result = await this.$http.post('/deleteStudent', { s_id: id })
        if (result.status !== 200) return this.$message.error('删除失败!')
        this.getStudent()
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //搜索
    async searchTable (val1, val2) {
      const result = await this.$http.post('/searchStudent', { s_name: val1, d_number: val2 })
      if (result.status !== 200) return this.$message.error('查询失败!')
      if (!result.data.length) return this.$message.warning('查无此人!')
      this.tBody = result.data
      this.$message.success('查询成功')
    }
  },
  created () {
    this.$store.commit('addTag', { name: '学生管理', router: 'student' })
    this.tagName = this.$store.state.tagNames
    this.getStudent()
    this.getDormitoryList()
  },
};
</script>

<style scoped lang="less">
.el-select {
  width: 100%;
}
.el-select-dropdown {
  min-width: 0 !important;
  width: 200px;
}
.delete_p {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
</style>
